<template>
	<view class="mainPage">
		<view class="cu-bar search" :style="{ backgroundColor: barStyle.backColor, color: barStyle.textColor }">
			<x-city />
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="search.keywords" type="text" placeholder="搜索商户" confirm-type="search"
					@input="searchList" />
			</view>
		</view>
		<view class="list padding padding-top-xs padding-left-0" v-if="list.length > 0">
			<view class="item bg-white radius-lg padding-sm margin-bottom-sm" v-for="(item, index) in list" :key="index"
				@tap="$utils.$page.open('/pages/mch/details?id=' + item.id)">
				<view class="crow">
					<view class="left avatar margin-left-sm">
						<image :src="item.logo" lazy-load mode="" class="img"></image>
					</view>
					<view class="right">
						<view class="top crow space-between">
							<view class="left-box">
								<text class="padding-right-mn text-black text-bold">{{ item.title }}</text>
								<text :class="item.is_collect ? 'text-red cuIcon-likefill' : 'cuIcon-like'"
									@tap.stop="collect(item)"></text>
							</view>
						</view>
						<view class="center text-sm text-gray crow space-between">
							<view class="left-box">
								<text class="padding-left-mn">{{ item.city }} {{ item.area }} {{ item.street }}</text>
							</view>
							<view class="right-box crow" v-if="item.distance_text">
								<u-icon name="map" size="15" color="gray"></u-icon>
								{{ item.distance_text }}
							</view>
						</view>
						<view class="bottom text-gray text-sm crow space-between">
							<view class="crow">
								<view class="solid-right padding-right">
									<text class="themeColor cuIcon-like"></text>{{ item.collect_num }}
								</view>
								<view class="solid-right padding-lr">
									<text class="cuIcon-friend themeColor"></text>{{ item.people_num }}
								</view>
								<view class="padding-left">
									<text class="cuIcon-message themeColor"></text>{{ item.comment_num }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="technician-list"></view>
			</view>
		</view>
		<view class="vh-100 flex flex-direction justify-center" v-else>
			<emptyData type="notData" text="暂无商户"></emptyData>
		</view>

		<loading v-if="pageLoading" />

		<x-tabbar page="/pages/mch/index" />
	</view>
</template>

<script>
import { debounce } from '@/utils/functions';
let debounceGetList;
export default {
	data() {
		return {
			pageLoading: false,
			barStyle: {
				backColor: '',
				textColor: '#ffffff'
			},
			search: {
				page: 1,
				keywords: '',
			},
			list: []
		};
	},
	onLoad() {
		let location = uni.getStorageSync('location');
		this.search.lat = location.lat;
		this.search.lng = location.lng;
		this.getList();
		debounceGetList = debounce(() => { this.getList() }, 300);
		uni.$on('x-city-change', this.searchList);
	},
	unLoad() {
		uni.$off('x-city-change', this.searchList);
	},
	onShow() {
		uni.hideTabBar();
	},
	onReachBottom() {
		this.search.page++;
		this.getList();
	},
	methods: {
		getList() {
			if (this.pageLoading) return;
			this.pageLoading = true;
			this.$utils.$api.Shop.list(this.search).then(data => {
				this.list = [...this.list, ...data.data];
			}).finally(() => {
				this.pageLoading = false;
			});
		},
		searchList() {
			this.search.page = 1;
			this.list = [];
			debounceGetList();
		},
		collect(item) {
			this.$utils.$api.Collect.shop(item.id).then((data) => {
				item.is_collect = data.state;
			}).catch(err => {
				this.$utils.$message.error(err.msg);
			})
		}
	},
	onPageScroll(event) {
		let scrollTop = event.scrollTop
		let color = Math.round(Math.round(scrollTop) / 100) * 255;
		let alpha = Math.round(scrollTop) / 100;

		color = color >= 255 ? 255 : color
		alpha = alpha >= 1 ? 1 : alpha

		this.barStyle.textColor = `rgb(${255 - color},${255 - color},${255 - color})`;
		this.barStyle.backColor = `rgba(255,255,255,${alpha})`;
	}
}
</script>
<style lang="less" scoped>
.list {
	.item {
		.avatar {
			position: relative;
			width: 170upx;
			height: 170upx;
			display: flex;
			align-items: center;

			.img {
				width: 130upx;
				height: 130upx;
				border-radius: 20upx;
			}

			.title-img {
				width: 210upx;
				height: 175upx;
				position: absolute;
				left: -20rpx;
			}
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 150upx;

			.top {
				.status {
					border: 2rpx solid var(--theme-color);
					font-size: 20rpx;

					.zuizao {
						background-color: var(--theme-color);
						padding: 5rpx;
						border-top-right-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
						color: white;
					}

					.time {
						padding: 5rpx;
					}
				}
			}
		}
	}
}

.technician-list {
	width: 100%;
}
</style>
